<script>
export default {
  name: "anLisi",
  data() {
    return {
      flag: true
    }
  },
  methods: {}
}
</script>

<template>
  <div id="app">
    <!-- v-if和v-show
                相同点：显示和隐藏元素
                不同点：v-if删除DOM元素，v-show是通过display：none,进行隐藏。
                应用场景：只修改一次的时候可以使用v-if，频繁切换的时候可以使用v-show
            -->
    <div v-if="flag">1</div>
    <div v-show="flag">2</div>

    <div v-if="flag">3</div>
    <div v-else>4</div>
  </div>
</template>

<style scoped lang="less">

</style>